import React, { Component } from 'react'
import { Layout ,Tag,Avatar,Button,Dropdown,Menu,Modal} from 'antd';
import mobxdata  from "../../mobx/data"
import {observer} from "mobx-react"
import { roleList } from '../../utils';
import {withRouter} from "react-router-dom"
import {
    UserOutlined,
    LogoutOutlined,
    DownOutlined,
    ExclamationCircleOutlined,
} from '@ant-design/icons';
import { request } from '../../api';
import {connect} from "react-redux"
import { baseURL } from '../../api/ajax';
const { Header } = Layout;


@connect(
    state=>{
        return{
            title:state.getIn(['data','title'])
        }
    }
)
@observer
export default class MyHead extends Component {
    
    handleLagout=()=>{
        Modal.confirm({
            title: '退出登录',
            icon: <ExclamationCircleOutlined />,
            content: '你确定要退出登录吗?',
            okText: '确认',
            cancelText: '取消',
            onOk:()=>{
                this.props.history.push("/login")    
                mobxdata.resetuserinfo()   // 清空userinfo
                localStorage.removeItem('token')
            }
        });
    }
    uploadFils=()=>{
        this.file.click()
    }
    sendFile=()=>{
        console.log("ok");
        var file = this.file.files[0]
        var data = new FormData()
        data.append("avatar",file)
        request.uploadavatar(data)
        .then(res=>{
            if(res.code==200){
                mobxdata.changeuserinfo({
                    avatar:res.avatar
                })
            }
        })
    }
    render() {
        const {userinfo} = mobxdata 
        return (
            <Header className="site-layout-background" style={{ padding: "0 20" }} >
                <div className="head-box">
                    <marquee behavior="" direction="">
                        {this.props.title}
                    </marquee>
                    {
                        // console.log(userinfo.username),
                        userinfo.username&&<div className="user-box">
                            <Dropdown
                                overlay={
                                    <Menu>
                                        <Menu.Item key="0">
                                        个人信息
                                        </Menu.Item>
                                        <Menu.Item key="1">
                                        修改密码
                                        </Menu.Item>
                                    </Menu>
                                }
                            >
                                <span style={{margin:"0 5px"}}>{userinfo.username} <DownOutlined/></span>
                            </Dropdown>
                            <input type="file" onChange={this.sendFile} ref={el=>this.file=el} style={{display:"none"}}/>
                            <Tag style={{margin:"0 5px"}} color={ roleList.find(item=>item.role==userinfo.role).color }> {roleList.find(item=>item.role==userinfo.role).title }</Tag>
                            {
                                userinfo.avatar?
                                <Avatar onClick={this.uploadFils} style={{ margin:"0 5px",cursor:'pointer'}} src={userinfo.avatar.replace(/public/,baseURL)} />
                                :
                                <Avatar onClick={this.uploadFils} style={{ backgroundColor: '#87d068',margin:"0 5px",cursor:'pointer' }} icon={<UserOutlined />} />
                            }
                            <Button style={{margin:"0 5px"}} type="danger" size="mini" 
                                shape="circle" icon={<LogoutOutlined /> } 
                                onClick={this.handleLagout}
                            ></Button>
                        </div>
                    }
                </div>
            </Header>
        )
    }
}
